import React, {useEffect, useState} from 'react';
import {
  ModalForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-form';
import ProFormItem from "@ant-design/pro-form/lib/components/FormItem";
import {TreeSelect} from "antd";
import {queryUserEnum} from "@/pages/AuthGroup/service";
import {queryEnumRule} from "@/pages/Rule/service";


export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.RuleListItem>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  // 远程加载配置
  const [menus,setMenus] = useState([]);
  const [users,setUsers] = useState({});

  useEffect(() => {
    queryUserEnum().then((res) => {
      // 如果响应成功
      if(res.status === 'ok'){
        setUsers(res.data);
      }
    });
    queryEnumRule({authOpen:1}).then((res) => {
      // 如果响应成功
      if(res.status === 'ok'){
        setMenus(res.data);
      }
    });
  }, []);
  return (
    <ModalForm
      width={640}
      modalProps={{
        onCancel: () => {
          props.onCancel();
        },
        destroyOnClose: true,
      }}
      title="修改"
      visible={props.updateModalVisible}
      onFinish={props.onSubmit}
      initialValues={{
        id: props.values.id,
        name: props.values.name,
        users: props.values.users,
        rules: props.values.rules,
      }}
    >
      <ProFormText
        width="sm"
        name="id"
        disabled
        hidden
      />
      <ProFormText
        label="权限组名称"
        width="md"
        name="name"
        rules={[
          {
            required: true,
            message: '不能为空',
          },
        ]}
      />
      <ProFormItem
        name="rules"
        label="权限"
      >
        <TreeSelect
          showSearch
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          placeholder="请选择勾选权限"
          allowClear
          treeDefaultExpandAll
          treeCheckable
          treeData={menus}
          maxTagCount={20}
        />
      </ProFormItem>
      <ProFormSelect
        name="users"
        label="成员"
        width="xl"
        mode="tags"
        placeholder="请选择成员"
        valueEnum={users}
      />
    </ModalForm>
  );
};

export default UpdateForm;
